<template>
  <view>
    <!-- <TopActionBar /> -->
    <PagesContainer has-custom-navbar scroll-container>
      <view class="p-20rpx">
        <u-swiper
          :list="swiperList"
          height="300rpx"
          radius="16rpx"
          indicator
          indicator-mode="dot"
          autoplay
          circular
        />
        <view class="card-container mt-10px">
          <view class="news-list">
            <view class="w-full mb-20rpx flex flex-wrap justify-between">
              <div
                v-for="menu in menuList"
                :key="menu"
                class="flex flex-col justify-center items-center mb-10px"
                @click="handleMenuClick(menu)"
              >
                <view class="w-60px h-60px flex justify-center items-center">
                  <image
                    :src="menu.icon"
                    class="rounded-8px w-36px h-36px"
                  ></image>
                </view>

                <span class="text-first text-13px mt-6px">
                  {{ menu.title }}
                </span>
              </div>
            </view>
          </view>
        </view>
      </view>
    </PagesContainer>
  </view>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { Component, Vue } from 'vue-property-decorator'

import PagesContainer from '@/components/pages-container/pages-container.vue'
import TopActionBar from '@/components/top-action-bar.vue'
import { userStore } from '@/store'
import { showToast } from '@/utils/helper/uniHelper'
import { getOnGuardRecordsApi } from '../on-guard/service'

@Component({ name: 'Index', components: { PagesContainer, TopActionBar } })
export default class Index extends Vue {
  get userInfo(): any {
    return userStore.userInfo || {}
  }

  swiperList = ['/static/index/neiwu.png', '/static/index/neiwu2.png']

  get menuList(): any[] {
    return [
      {
        key: 'menu-1',
        title: '科普知识',
        icon: '/static/8.gif',
        url: '/pages/on-guard/index',
        type: 'page',
        per: 'user'
      },
      {
        key: 'menu-2',
        title: '案例分析',
        icon: '/static/9.gif',
        url: '/pages/on-guard/clock-in',
        type: 'page',
        per: 'user'
      },
      {
        key: 'menu-11',
        title: '人员状态',
        icon: '/static/10.gif',
        url: '/pages/on-guard/person-status',
        type: 'page',
        per: 'user'
      }
      // {
      //   key: 'menu-12',
      //   title: '涉案',
      //   icon: '/static/11.gif',
      //   url: '/pages/on-guard/caseThing',
      //   type: 'page',
      //   per: 'user'
      // }
      // {
      //   key: 'menu-13',
      //   title: '领用',
      //   icon: '/static/12.gif',
      //   url: '/pages/on-guard/receive',
      //   type: 'page'
      // }
    ].filter(
      (i) =>
        i.per === this.userInfo.Permission ||
        this.userInfo.Permission === 'admin'
    )
  }
  handleMenuClick(item: MenuItem | null) {
    if (!item) return
    if (!item.url) return showToast('功能开发中，敬请期待')

    switch (item.type) {
      case 'page':
        uni.navigateTo({
          url: item.url
        })
        break
      case 'webview':
        uni.navigateTo({
          url: `/pages/webview/index?url=${item.url}`
        })
        break
      default:
        break
    }
  }

  handle2List() {
    uni.navigateTo({
      url: '/pages/on-guard/messageList'
    })
  }

  async onLoad() {
    uni.showShareMenu({
      menus: ['shareAppMessage', 'shareTimeline']
    })
  }
}
</script>

<style lang="scss" scoped>
.menu-text {
  font-weight: 400;
  font-size: $font-size-sm;
  line-height: 36rpx;
  margin-top: 10rpx;
  color: $color-first-text;
}

.news-list {
  position: relative;
  .news-item {
    display: flex;
    padding: $space-base 0;
    border-bottom: 1rpx solid #f2f2f2;

    .news-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding: 10rpx 0;

      .news-title {
        font-weight: 500;
        font-size: $font-size-xl;
        line-height: 46rpx;
        color: $color-first-text;
      }

      .news-desc {
        margin-top: 10rpx;
        font-size: $font-size-sm;
        line-height: 36rpx;
        color: $color-third-text;
      }

      .news-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;

        .news-time {
          font-size: $font-size-xs;
          line-height: 34rpx;
          color: $color-third-text;
        }
      }
    }

    .news-img {
      padding-left: $space-base;
    }
  }
}
</style>
